Общий курс · осенний семестр · занятие 10 из 15

UI/UX: напоминание и задание с LLM

О чём эта тема: Сжатое напоминание основ проектирования интерфейсов — что такое UX и UI, как устроен пользователь и какие законы этим управляют — и практическое задание: сгенерировать интерфейс через LLM и разобрать, почему результат получился таким.
Аннотация: Первая часть занятия освежает пройденное: графический интерфейс как визуальный язык общения с машиной, разница между UX и UI, пять особенностей человека, на которых стоит всё проектирование. Дальше — подробный разбор одиннадцати законов UX: у каждого формулировка, история и практические следствия для интерфейса. Два закона проверяются на себе интерактивно: закон Фиттса — кликами по мишеням разного размера, закон Хика — поиском пункта в коротком и длинном меню. Вторая часть — задание: по подготовленному техническому описанию экрана сгенерировать интерфейс с помощью LLM, повторить генерацию в разных условиях и таблицей разобрать, чем результаты различаются и какие законы нарушены в худших вариантах.
Пререквизиты: Занятия 6–7 (UML) не обязательны, но полезны: описание экрана из задания по духу близко к моделям, которые вы уже строили. Понадобится доступ к любой LLM (браузерный чат).
Мотивация: Инструменты дошли до того, что интерфейс «на коленке» генерируется за минуту — достаточно попросить нейросеть. Проблема в другом: результат бывает и приличным, и катастрофой, а без понимания законов UX вы не отличите одно от другого и не объясните модели, что исправить. Это занятие ставит опыт: сначала вспоминаем правила, затем смотрим, как их соблюдает и нарушает LLM.

1. Напоминание: GUI, UX и UI

Графический пользовательский интерфейс (GUI) — визуальный язык общения человека и машины: окна, кнопки и меню переводят сложные технические процессы в элементы, которыми можно управлять без знания кода. UX (user experience) — опыт пользователя: достигает ли он цели и насколько это просто. UI (user interface) — то, как интерфейс выглядит и ощущается: цвета, читабельность, попадание пальцем в кнопки.

Профессия старше названия. Когда Вильгельм Шиккард в 1623 году придумывал, какие тумблеры и в каком порядке должен крутить человек на его арифмометре, он занимался UX; а когда решал, как эти ручки будут выглядеть и располагаться, — UI. Средневековый мастер точильного колеса, выбиравший между ручкой и ножной педалью, проектировал взаимодействие; выбиравший размер камня и материал подставки — внешний вид. Разница ровно та же: UX планирует шаги взаимодействия, UI — вид каждого шага; на практике этим занимается один человек, поэтому профессия и пишется через дробь.

Арифмометр Шиккарда: механическая машина с тумблерами и шкалами — первый пример проектирования интерфейса — Арифмометр Шиккарда: интерфейс проектировали задолго до экранов

1.1. Пять фактов о пользователе

Удобный интерфейс — тот, в котором человек решает задачи с минимальными затратами энергии; а энергию мозг экономит всегда. Отсюда пять рабочих фактов:

Сила привычки. Повторяющаяся задача образует в мозге устойчивые связи — навык, работающий почти бесплатно (цикл «сигнал → действие → награда»). Вывод: используйте проверенные шаблоны, а не изобретайте свои способы «сохранить файл» — знакомый элемент пользователь понимает без обучения.
Древние инстинкты. Резкие появления, дёрганые движения и кричащие цвета считываются как раздражители и снижают эмоциональную стабильность. Вывод: гармоничная палитра (цветовой круг) и плавные, физически правдоподобные анимации.
Ограниченное внимание. Рабочая память держит немного объектов, а переключение контекста стоит дорого. Вывод: вести пользователя линейно, редкие настройки прятать в «по умолчанию», группировать элементы в блоки, класть главное сверху и слева.
Распознавание образов. Глаз выделяет сначала цвет, затем форму, затем содержимое. Вывод: важное отличается цветом и формой раньше, чем текстом; одинаковые функции выглядят одинаково.
Моторика. Чем меньше движений глаз и рук — тем эффективнее работа; у программиста руки на клавиатуре, у дизайнера — стилус, и это меняет требования. Вывод: сокращать клики и перемещения, повторять геометрические схемы до автоматизма.

Готовые системы, в которых эти принципы уже разложены по компонентам, — Material Design (Google) и Human Interface Guidelines (Apple); ссылки в «Источниках».

2. Законы UX: разбор по одному

У «пяти фактов» из первого раздела есть именованные следствия — паттерны UX-дизайна. Паттерн здесь — правило или закономерность с психологической основой: когнитивные искажения и шаблоны поведения проистекают из подсознательных суждений. Понимание паттернов позволяет провоцировать желаемые реакции: пользователь решает свою задачу, делает это быстро, с минимумом ошибок и короткой кривой обучения — и остаётся доволен. Ниже — одиннадцать главных, каждый пригодится в задании из раздела 3.

2.1. Закон Фиттса

формулировка Чем больше элемент и чем ближе он расположен к пользователю, тем проще на него навести курсор и нажать.

Время, необходимое для перемещения курсора на цель, зависит от расстояния до цели, делённого на её размер: с близкими крупными объектами взаимодействовать легче. Закон сформулировал психолог Пол Фиттс в 1954 году, работая над математическими моделями поведения человека. Эксперимент был прост: на доске — две чувствительные вертикальные полоски, которых испытуемый как можно быстрее касался стилусом поочерёдно, а Фиттс менял их ширину и расстояние между ними. Зависимость оказалась чёткой: чем меньше цель, тем дольше каждое касание — даже когда расстояние не меняется; чем крупнее цель — тем быстрее её достигают.

Сравнение: мелкие слипшиеся кнопки Cancel и Save против крупных кнопок с отступом под палец — В мелкие слипшиеся кнопки пальцем не попасть — крупные с отступом решают

Схема эксперимента Фиттса: две вертикальные полоски-цели, между которыми испытуемый переносит стилус — Эксперимент Фиттса: ширина целей и расстояние меняются, время касаний измеряется

По сути закон даёт количественную оценку дихотомии скорости и точности: чем точнее нужно выполнить задачу, тем больше времени она потребует. Для интерфейса это означает: чем дальше от курсора или пальца находится цель — скажем, кнопка «Купить», — тем крупнее она должна быть. Речь не об увеличении ради привлечения внимания, а о сокращении времени, за которое пользователь дотягивается до элемента.

Любопытный нюанс: элементы на границах экрана имеют условно бесконечную ширину — курсор просто упирается в край, и фаза торможения исчезает. Поэтому углы — самые легкодоступные места экрана: не случайно кнопка «Пуск» в Windows и меню в macOS прижаты к краям. Специалист по интерфейсам Джеф Раскин в книге «Интерфейс» подсчитал: использование верхнего меню в macOS занимает в среднем 0,6 секунды, а в Windows — целую секунду: меню там располагалось с отступом от верха экрана (выше была строка заголовка программы), и в него приходилось целиться.

Сравнение верхних меню macOS и Windows: меню у самого края экрана достигается быстрее — Меню у края экрана «бесконечно высокое» — целиться не нужно

Практические рекомендации из закона Фиттса:

увеличивайте область клика: лейблы чекбоксов и переключателей — кликабельные;
расставляйте элементы управления по ходу основных пользовательских сценариев;
между взаимно опасными кнопками («Сохранить» и «Удалить») — увеличенный отступ;
в списках ссылок кликабельна вся строка, а не только надпись;
всплывающее меню в месте курсора экономит путь мыши целиком.

Список ссылок, в котором кликабельна вся строка, а не только текст — Кликабельная строка целиком — цель крупнее

Контекстное меню, всплывающее прямо в месте курсора — Меню в месте курсора — путь мыши нулевой

Тренажёр · закон Фиттса на себе

Нажмите «старт» и кликайте по появляющимся мишеням как можно быстрее — их будет десять, разного размера и в разных местах. После серии сравните среднее время по крупным и мелким мишеням: закон Фиттса измерен на вас лично.

Серия не начата.

2.2. Закон Хика

формулировка Чем меньше вариантов, тем быстрее делается выбор.

Закон Хика — Хаймана — экспериментально подтверждённая теория о том, что объём поступающей информации влияет на время принятия решения. В 1952 году психологи Уильям Хик и Рей Хайман вывели формулу логарифмической зависимости времени реакции от числа опций:

T = a + b · log₂(n + 1)

T — общее время реакции
a — задержка перед выполнением задания
b — индивидуальный коэффициент скорости принятия решения
n — количество вариантов, из которых нужно выбрать

График закона Хика: время реакции растёт логарифмически с числом вариантов — Рост числа вариантов увеличивает время реакции — логарифмически

Применение — везде, где пользователь выбирает: выпадающие меню, формы регистрации, навигация. Если на сайте сорок разделов меню — сгруппируйте их по категориям: опций на каждом шаге станет меньше, когнитивная нагрузка упадёт (так устроен почти любой интернет-магазин техники или одежды).

Меню интернет-магазина, сгруппированное по категориям товаров — Группировка по категориям: меньше опций на каждом шаге

А если сократить варианты невозможно — разбейте выбор на простые этапы. Каталог Netflix кажется бесконечным, но платформа сняла муку выбора функцией «Топ-10 в вашей стране»: десять вариантов вместо тысяч.

Подборка «Топ-10 в вашей стране» на главном экране Netflix — Netflix: бесконечный каталог, но выбор — из десяти

Тренажёр · закон Хика на себе

Два раунда: найдите названный пункт сначала в меню из 4 пунктов, затем — из 24. Время ищется от появления меню до верного клика; сравните результаты и вспомните формулу с логарифмом.

Раунды не начаты.

2.3. Закон Якоба Нильсена

формулировка Пользователи проводят большую часть времени на других сайтах — и ожидают, что ваш работает так же, как остальные.

Похожесть сайтов друг на друга — не недостаток, а удобство: цель не в «уникальности и эксклюзивности», а в том, чтобы пользователь сосредоточился на своей задаче, а не на изучении новых моделей поведения. Механизм за этим принципом называется ментальной моделью: представление человека о продукте формируется многократным использованием других похожих систем. Знакомясь с новым продуктом, человек переносит на него готовые ожидания и привычки — ребёнок, выросший с планшетом, обязательно попробует «свайпнуть» телевизор или книгу.

Важно помнить два неравенства: ментальная модель не равна реальности, а ментальная модель дизайнера не равна ментальной модели пользователя. Отсюда и совет Нильсена: не перегружайте людей новыми концепциями — используйте знакомые шаблоны.

Иллюстрация ментальной модели: представления дизайнера и пользователя о продукте различаются — Модель дизайнера ≠ модель пользователя

2.4. Закон Прагнанца

формулировка Человеческий мозг склонен интерпретировать сложное через более простые формы.

Закон родом из гештальт-психологии: в 1910 году Макс Вертхаймер заметил, что ряд мигающих огней воспринимается как непрерывно движущаяся линия — мозг упрощает сложное, чтобы не перегружать себя. Не делайте интерфейс загадкой: пользователь либо не поймёт его, либо сам упростит до понятной формы — не обязательно той, которую вы имели в виду. Особенно это касается иконок.

Иллюстрация закона Прагнанца: сложные фигуры мозг считывает как простые формы — Сложное считывается как комбинация простого

2.5. Закон близости

формулировка Элементы, расположенные близко друг к другу, воспринимаются как одна группа.

Ещё один принцип гештальта: если элементы должны восприниматься связанными — разместите их рядом. Подпись живёт около своего поля, кнопка действия — около объекта действия.

Иллюстрация закона близости: точки, сгруппированные расстоянием, читаются как отдельные группы — Расстояние группирует без рамок и линий

2.6. Закон внутреннего и внешнего

формулировка Внутренние промежутки всегда должны быть меньше внешних.

Следствие закона близости. Каждый сложный элемент состоит из меньших: слова — из букв, строки — из слов, текст — из строк. Чтобы объект читался как самостоятельный, расстояние от него до соседей должно быть больше, чем расстояния внутри него, — иначе группы разваливаются и перемешиваются.

Иллюстрация закона внутреннего и внешнего: внешние отступы между группами больше внутренних — Внешний отступ больше внутреннего — границы групп очевидны

2.7. Закон Миллера

формулировка В среднем человек удерживает в кратковременной памяти 7 ± 2 элемента.

В 1956 году американский психолог Джордж Миллер опубликовал статью «Магическое число семь плюс-минус два». В экспериментах испытуемые различали звуковые сигналы разной частоты: на двух-трёх сигналах сложностей не было, с четвёртого начинались проблемы, с пятого ошибки учащались. Обобщив опыты со звуком, вкусом и зрением, Миллер получил своё 7±2 — ёмкость кратковременной памяти среднестатистического человека.

Парадокс в том, что один из самых цитируемых законов UX-дизайна почти не имеет отношения к интерфейсам. «Не больше семи пунктов меню» — миф: пользователю незачем запоминать то, что и так показано на экране. Исследования Human Factors International показали, что объёмные, но неглубокие меню работают лучше глубоко вложенных. Сам Миллер был потрясён тем, как истолковали его статью: исследования касались одномерных стимулов (звук, яркость) и не относились к способности человека понимать печатный текст.

Настоящий вывод для проектировщика: кратковременная память ограничена, поэтому делите информацию на порции и не просите пользователя держать в голове много фрагментов одновременно. И не зацикливайтесь на цифре семь.

2.8. Краевой эффект

формулировка Люди лучше запоминают первый и последний элементы в ряду.

Слова в начале и в конце ряда закрепляются в памяти лучше тех, что между ними. Для интерфейса это аргумент класть важнейшие пункты в начало и конец списка или меню — середина забудется первой.

Диаграмма краевого эффекта: вероятность запоминания выше у первых и последних элементов ряда — Кривая запоминания: края ряда помнятся, середина проседает

2.9. Закон Теслера

формулировка Для любой системы существует уровень сложности, который нельзя сократить, — вопрос лишь, кто его понесёт.

Ларри Теслер — специалист по взаимодействию человека и компьютера, работавший в Xerox PARC, Apple, Amazon и Yahoo; именно он ввёл в обиход Ctrl+C и Ctrl+V. Его закон сохранения сложности гласит: у каждого приложения есть неустранимая сложность, и единственный вопрос — кто будет иметь с ней дело: пользователь, разработчик приложения или разработчик платформы. Сделать «просто» — это много работы: уменьшая сложность для пользователя, мы переносим её на дизайнеров и разработчиков.

Схема закона Теслера: неустранимая сложность распределяется между пользователем, разработчиком приложения и платформой — Сложность не исчезает — она перекладывается

Разберём пример — выбор типа платёжной системы при оплате картой:

Форма оплаты с ручным выбором типа платёжной системы из списка — Сложность у пользователя: выбери систему сам

Анимация: тип платёжной системы определяется автоматически по первым цифрам номера карты — Сложность у разработчика: система определяется по номеру

В первом случае выбор ложится на плечи пользователя — система для него сложнее, зато разработка проще. Во втором тип подставляется автоматически по первым цифрам номера карты: у пользователя на шаг меньше, у разработчика — на задачу больше.

Типичная ошибка Отдавать пользователю как можно больше «контролов», как будто он лучше знает, что с ними делать. Очередная пачка чекбоксов говорит пользователю прямым текстом: «Парень, теперь это твоя проблема». Закон Теслера предлагает противоположное: забрать сложность на свою сторону.

2.10. Модель Кано

формулировка Методика оценки эмоциональной реакции потребителя на отдельные характеристики продукта.

Модель разработана в 1984 году доктором Нориаки Кано; она помогает понять желания потребителей, избавиться от ненужных функций и управлять удовлетворённостью и лояльностью. Все свойства продукта делятся на пять категорий:

График модели Кано: кривые обязательных, линейных и привлекательных характеристик в осях реализованность — удовлетворённость — Модель Кано: как категории свойств влияют на удовлетворённость

Обязательные — без них продукт не работает: автомобиль без руля, смартфон без звонков. Их наличие эмоций не вызывает — они «по умолчанию», но отсутствие хотя бы одного основного свойства не компенсируется ничем: разочарование гарантировано.

Линейные — «чем больше, тем лучше»: объём памяти, расход топлива, ёмкость аккумулятора. Удовлетворённость растёт прямо пропорционально уровню характеристики.

Привлекательные — «киллер-фичи»: Touch ID и Face ID в своё время, разблокировка MacBook часами, беспроводная зарядка. Их отсутствие не разочаровывает (ожиданий не было), а обнаружение за счёт эффекта неожиданности впечатляет настолько, что о нём рассказывают другим. Со временем многие привлекательные свойства мигрируют в обязательные.

Безразличные — не влияют на удовлетворённость: сторона расположения бензобака, шифрование фотографий, о котором никто не знает.

Обратные — чем их больше, тем хуже: обилие кнопок на руле, отвлекающее водителя; парковка с множеством мест, которые настолько узкие, что дверь не открыть.

График обязательных характеристик: реализация не радует, отсутствие разочаровывает — Обязательные: наличие незаметно, отсутствие фатально

График привлекательных характеристик: отсутствие не огорчает, наличие восхищает — Привлекательные: отсутствие простительно, наличие восхищает

Как пользоваться моделью: составьте список свойств продукта отдельно по сегментам аудитории (разные сегменты видят ценность в разном) и задайте по каждому свойству два вопроса — «как бы вы себя чувствовали, если бы продукт имел эту характеристику?» и «…если бы не имел?». Варианты ответов: «мне бы понравилось», «я ожидаю это», «мне всё равно», «могу с этим жить», «не использовал бы продукт из-за этого». Пересечение пары ответов в таблице даёт категорию свойства:

Таблица Кано: пересечение ответов на функциональный и дисфункциональный вопросы даёт категорию A, O, M, I, R или Q — A — привлекательные, O — линейные, M — обязательные, I — безразличные, R — обратные, Q — сомнительный ответ

Например, ответы «мне бы понравилось» на положительный вопрос и «я ожидаю это» на отрицательный дают категорию A — привлекательное свойство. Ответы R означают, что перед вами не целевая аудитория; Q — что вопрос, скорее всего, не поняли.

2.11. Эффект фон Ресторфф

формулировка Среди нескольких похожих объектов запомнится тот, что отличается от других.

Психиатр Хедвиг фон Ресторфф установила: в группе сходных элементов запоминаются изолированные — непохожий выделяется всегда. Совет дизайнеру прямой: хотите что-то подчеркнуть — придайте этому другую форму или отделите от остальных элементов. Главное действие экрана и должно быть тем самым «непохожим».

Ряд одинаковых элементов, среди которых один выделен цветом — он и запоминается — Один непохожий среди похожих забирает внимание

3. Задание: интерфейс руками LLM

Инструменты генерации это занятие не запрещает — оно требует их понимания. Для задания подготовлено техническое описание экрана «Расписание занятий» — структура, данные, действия и состояния, сознательно без единого дизайн-указания: скачать z10_prompt_example.md.

Задание · практика 10

Сгенерируйте интерфейс. Отдайте файл описания LLM с просьбой «сгенерируй HTML-страницу с интерфейсом по этому описанию». Сохраните результат (HTML-файл или скриншот).
Повторите генерацию минимум дважды, меняя условия: другая модель, другая формулировка просьбы, повторный запуск той же модели. Сохраняйте каждый результат.
Сравните версии таблицей: строки — элементы экрана из описания (переключатель дня, список занятий, кнопка «Сегодня», фильтр, индикация «идёт сейчас», пометки изменений); столбцы — версии; в ячейках — как элемент реализован и реализован ли вообще.
Разберите деградации. Для каждой найденной проблемы назовите закон из раздела 2, который нарушен, и сформулируйте причину: чего не хватало в описании? Что модель «дофантазировала»? Типичные находки: кнопка «Сегодня» размером с ноготь в углу (Фиттс), фильтр из шести рядов флажков (Хик и Теслер), пары и перемены слиплись в один список (близость), «идёт сейчас» ничем не выделено (фон Ресторфф).
Итог — короткий отчёт: таблица сравнения + список «нарушение → закон → причина». Он понадобится на занятии 11: там вы напишете файл правил, который заставит LLM таких ошибок не делать.

Типичная ошибка Оценивать сгенерированный интерфейс словом «красиво/некрасиво». Вкус — не аргумент; аргумент — закон: «кнопка возврата к сегодняшнему дню — самое частое действие, а она мельче всех и дальше всех: нарушен закон Фиттса». Одна такая фраза стоит десяти «мне не нравится».

Размяться перед разбором чужих ошибок можно на подборке нарочно ужасных интерфейсов — ссылка в «Источниках»: попробуйте для каждого экспоната назвать нарушенный закон.

Контрольные вопросы

UX — проектирование взаимодействия: какие шаги делает пользователь и достигает ли цели. UI — вид каждого шага: цвета, размеры, читабельность, попадание в кнопки. На практике этим занимается один специалист — отсюда написание через дробь.
Повторяющиеся задачи образуют навык — оптимальные нейронные связи, работающие почти без затрат энергии. Знакомый элемент интерфейса запускает готовый навык; изобретённый заново — заставляет учиться, то есть тратить энергию, которую мозг экономит.
Сначала цвет, затем форма, затем содержимое. Следствие: важное должно отличаться на уровне цвета и формы, а не только текстом; одинаковые по функции элементы должны выглядеть одинаково.
Фиттс: время попадания в цель растёт с расстоянием и падает с размером — частые кнопки делаются крупными и ближними, углы экрана «бесконечно велики». Хик: время выбора растёт логарифмически с числом вариантов — меню группируют по категориям, длинные списки разбивают на шаги.
Исследование Миллера касалось кратковременной памяти и одномерных стимулов, а пункты меню видны на экране — их не нужно запоминать; широкие неглубокие меню работают не хуже. Настоящий вывод: не заставлять пользователя держать в голове много фрагментов сразу — делить информацию на порции.
Сложность системы не сокращается — её кто-то несёт. Пачка флажков означает, что разработчик переложил сложность на пользователя («теперь это твоя проблема»); хороший дизайн забирает её на свою сторону — например, определяет платёжную систему по номеру карты автоматически.
Одна генерация — случайность; несколько показывают устойчивые проблемы и разброс. Таблица по элементам описания превращает оценку из «нравится/не нравится» в проверяемые факты: что реализовано, что потеряно, какой закон нарушен и почему.

Источники

Что такое UX/UI дизайн на самом деле? // Хабр : [сайт]. — URL: https://habr.com/ru/articles/321312/ (дата обращения: 08.07.2026).
Базовые UI/UX паттерны // Хабр : [сайт]. — URL: https://habr.com/ru/articles/476532/ (дата обращения: 08.07.2026).
Восемь именных законов в UX дизайне. Часть 1 // Хабр : [сайт]. — URL: https://habr.com/ru/companies/dbtc/articles/443306/ (дата обращения: 08.07.2026).
Восемь именных законов в UX дизайне. Часть 2 // Хабр : [сайт]. — URL: https://habr.com/ru/companies/dbtc/articles/456680/ (дата обращения: 08.07.2026).
9 универсальных паттернов, которые помогут улучшить UX-дизайн // RB.RU : [сайт]. — URL: https://rb.ru/story/ux-patterns/ (дата обращения: 08.07.2026).
Material Design // Google : [сайт]. — URL: https://m3.material.io/ (дата обращения: 08.07.2026).
Human Interface Guidelines // Apple Developer : [сайт]. — URL: https://developer.apple.com/design/human-interface-guidelines/ (дата обращения: 08.07.2026).
BadUI : коллекция нарочно плохих интерфейсов : [сайт]. — URL: https://goulartnogueira.github.io/BadUI/ (дата обращения: 08.07.2026).